<template>
	<view class="page">
		<view class="content">
			<view class="message">
				<view class="left">
					<u-icon name="bell" size="26" color="#3662EC"></u-icon>
				</view>
				<view class="right">
					<view class="top">
						<u--text text="系统消息"></u--text>
						<u-badge :type="type" max="99" :value="value" bgColor="#F21E46"></u-badge>
					</view>
					<view class="bottom">
						<u--text text="闫嘉怡，您的20元优惠券将在三天内过期，立sssssssss" :lines="1" color="#767676" size="12"></u--text>
					</view>
				</view>


			</view>


		</view>
	</view>
</template>
<script >
export default {
	data() {
		return {
			value: 16
		}
	}
}
</script>
<style lang="scss" scoped>
.content {
	padding: 30rpx 20rpx;
}

.message {
	background-color: white;
	border-radius: 10px;
	display: flex;

	.left {
		display: flex;
		width: 140rpx;
		justify-content: center;
		align-items: center;
	}

	.right {
		height: 140rpx;
		width: 540rpx;
		box-sizing: border-box;
		padding: 20rpx 0rpx 10rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.top {
			display: flex;
			justify-content: space-between;
		}
	}
}
</style>